<template>
    <div class="drag" ref="dragDiv">
        <div class="drag-text">
            {{msg}}
           
        </div>
         <div class="block block-bg" :class="{block_ok_bg:isSuccess}" @touchstart="touchstart($event)" @touchmove="touchmove($event)" @touchend="touchend($event)" ref="modeDiv"></div>
    </div>
</template>

<script>
import { onMounted, ref } from 'vue';
export default {
    name:'Drag',
    setup () {
        let msg=ref("请滑动解锁");
        let modeDiv=ref(null);
        let dragDiv=ref(null);
        let isSuccess=ref(false);//拖动成功
        let maxWidth="";
        let XStart=0;
        let XEnd=0;

        //当页面挂载后
        onMounted(()=>{
            maxWidth=dragDiv.clientWidth
        })
        function touchstart(e){
            //阻止默认时间
            e.preventDefault && e.preventDefault();
            if(!isSuccess.value){
                //获取触摸的X坐标
                XStart=e.touches[0].clientX;//一个手指


            }

        }
        function touchmove(e){
             e.preventDefault && e.preventDefault();
            if(!isSuccess.value){
                //获取触摸的X坐标
                let XMove=e.touches[0].clientX;


            }

        }
        function touchend(e){

        }
        

        return {dragDiv,modeDiv,isSuccess,msg,touchstart,touchmove,touchend}
    }
}
</script>

<style lang="scss" scoped>

</style>